<template>
  <el-input
    v-bind="fld"
    :value='value'
    @input="handleModelInput"
    @change="handleChange"
    :placeholder="fld.placeholder||$attrs.placeholder"
    :ref="fld.name"
    size="mini"
    >
    <template slot="prepend" v-if="fld.prepend||fld.addonPre">
      <span v-html="fld.prepend||fld.addonPre"></span>
    </template>
    <template slot="append" v-if="fld.append||fld.addonEnd">
      <span v-html="fld.append||fld.addonEnd"></span>
    </template>
  </el-input>
</template>
<script>
define(['vue'],function(vue){
  return vue.component('comp-text',{
    props : {
      fld :{required:false,default:function(){
        return {name:'',size:'mini'}
      }},
      value :{required:false},
      readonly :{required:false,default:false},
      disabled:{required:false,default:false},
    },
    template: template,
    methods:{
      handleModelInput :function(val){
        this.$emit("input", val);
      },
      handleChange :function(val){
        var key = this.fld.change || `${this.fld.name}:change`;
        if(!this.$root.callbacks[key]) {
          if(this.fld.change) {
            console.warn(`表单项中对${this.fld.name}定义了change方法:${this.fld.change},未在sontpl中发现对应的方法`);
          }
          return;
        }
        this.$root.callbacks[key].apply(this,arguments);
      },
    },
    mounted:function(){
      // dump('comp-text mounted fired');
    }
  });
});

</script>